<template>
  <common-search
    :show-item="2"
    :col-layout="{ xxl: 6, xl: 8, lg: 8, md: 12, sm: 24, xs: 24 }"
    v-model="query"
    :formItems="formItems"
    @search="search"
    @reset="reset"
    :showItem="2"
  ></common-search>
  <a-button type="primary" @click="add" v-modulePerm="['usConfig:edit']">
    <template #icon>
      <PlusOutlined />
    </template>
    新增
  </a-button>
  <common-table
    :customFilterDropdown="true"
    :columns="columns"
    :dataSource="dataList"
    v-model:localPagination="page"
    @paginationChange="onPageChange"
    v-model:loading="loading"
    :rowKey="(record) => record.id"
    :scroll="{ x: 'max-content' }"
    :slots="['action']"
  >
    <template #action="{ record }">
      <a-dropdown>
        <a @click.prevent>更多 <DownOutlined /></a>
        <template #overlay>
          <a-menu>
            <a-menu-item v-if="modulePerm(['usConfig:edit'])">
              <a @click="handleEdit(record)">编辑</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="handleDetail(record)">详情</a>
            </a-menu-item>
            <a-menu-item v-if="modulePerm(['usConfig:edit'])">
              <a-popconfirm
                title="是否要删除？"
                ok-text="是"
                cancel-text="否"
                @confirm="handleDel(record)"
                @cancel="cancel"
              >
                <a>删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </template>
  </common-table>
  <EditForm
    :showDetail="showDetail"
    :edit-form="editForm"
    :rules="addRules"
    :form-item="formItem"
    @close="closeEdit"
    @submit="submitEdit"
    :record="baseData"
  />
  <AddForm
    :add-form="addForm"
    :rules="addRules"
    @close="closeAdd"
    :form-item="formItem"
    @submit="submitAdd"
  />
</template>
<script>
export default {
  name: "configuration-usConfig",
};
</script>
<script setup>
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import { useSearchTable } from "@/hooks/table/useSearchTable";
import { ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import { getManyDictItems } from "@/api/system/dict.js";
import { modulePerm } from "@utils/modulePerm.js";
import AddForm from "@/views/upload/components/addForm.vue";
import EditForm from "@/views/upload/components/editForm.vue";
import { deleteOne } from "@/api/system/index.js";
import {
  addArea,
  editArea,
  getAreaList,
} from "@/api/configuration/usConfig.js";
const { dataList, query, loading, page, search, reset, onPageChange } =
  useSearchTable({
    searchAPI: getAreaList,
    queryFactory: () => ({}),
  });
const addRules = {
  stateCode: [{ required: true, message: "请输入州编码", trigger: "blur" }],
  stateName: [{ required: true, message: "请输入州名", trigger: "blur" }],
  saleZone: [{ required: true, message: "请输入销售区域", trigger: "blur" }],
  countryCode: [{ required: true, message: "请输入国家", trigger: "blur" }],
};

const columns = ref([
  {
    dataIndex: "countryCode",
    title: "国家",
    align: "center",
    fieldType: "String",
    type: "input",
  },
  {
    dataIndex: "stateCode",
    title: "州省编码",
    align: "center",
    fieldType: "String",
    type: "input",
  },
  {
    dataIndex: "stateName",
    title: "州省名称",
    align: "center",
    fieldType: "String",
  },
  {
    dataIndex: "stateNameCn",
    title: "州省中文",
    align: "center",
  },
  {
    dataIndex: "postcodeRange",
    title: "邮编范围",
    align: "center",
  },
  {
    dataIndex: "saleZone",
    title: "销售区域",
    align: "center",
  },
  {
    dataIndex: "action",
    title: "操作",
    align: "center",
  },
]);
const formItems = ref([
  {
    label: "国家编码",
    type: "select",
    field: "countryCode",
    options: [
      {
        label: "US",
        value: "US",
      },
      {
        label: "CA",
        value: "CA",
      },
    ],
  },
  {
    label: "州省编码",
    type: "input",
    field: "stateCode",
  },
  {
    label: "州省名称",
    type: "input",
    field: "stateName",
  },
  {
    label: "销售区域",
    type: "input",
    field: "saleZone",
  },
]);
const editForm = ref(false);
const addForm = ref(false);
const formItem = ref([
  {
    label: "国家",
    value: "countryCode",
    type: "input",
  },
  {
    label: "州省编码",
    value: "stateCode",
    type: "input",
  },
  {
    label: "州省名称",
    value: "stateName",
    type: "input",
  },
  {
    label: "州省中文",
    value: "stateNameCn",
    type: "input",
  },
  {
    label: "邮编范围",
    value: "postcodeRange",
    type: "input",
  },
  {
    label: "销售区域",
    value: "saleZone",
    type: "input",
  },
]);
const baseData = ref({});
const showDetail = ref(false);
const cancel = () => {};

/**
 * 删除
 * @param record
 * @returns {Promise<void>}
 */
const handleDel = async (record) => {
  try {
    const res = await deleteOne("/wms/us/area/delete", { id: record.id });
    message.success("删除成功");
    await search(page.value.pageNo);
  } catch (e) {
    message.error(e);
  }
};
/**
 * 初始化字典数据
 * @returns {Promise<void>}
 */
const init = async () => {
  try {
    const res = await getManyDictItems({
      dictCodeList: "sm_status",
    });
    formItems.value[1].options = res.result.sm_status;
    formItem.value[1].options = res.result.sm_status;
    addFormItem.value[1].options = res.result.sm_status;
  } catch (e) {
    console.log(e);
  }
};

const add = () => {
  addForm.value = true;
};
const closeAdd = () => {
  addForm.value = false;
};
const handleEdit = (record) => {
  editForm.value = true;
  baseData.value = record;
};
const closeEdit = () => {
  editForm.value = false;
  showDetail.value = false;
};
const handleDetail = (record) => {
  editForm.value = true;
  baseData.value = record;
  showDetail.value = true;
};
/**
 * 新增
 * @param form
 * @returns {Promise<void>}
 */
const submitAdd = async (form) => {
  try {
    for (let formKey in form) {
      if (form[formKey] === undefined || form[formKey] === null) {
        form[formKey] = "";
      }
    }
    const res = await addArea(form);
    message.success("新增成功");
    addForm.value = false;
    await search(page.value.pageNo);
  } catch (e) {
    message.error(e);
  }
};
/**
 * 编辑
 * @param form
 * @returns {Promise<void>}
 */
const submitEdit = async (form) => {
  try {
    console.log(form);
    for (let formKey in form) {
      if (form[formKey] === undefined || form[formKey] === null) {
        form[formKey] = "";
      }
    }
    form.id = baseData.value.id;
    const res = await editArea(form);
    message.success("编辑成功");
    editForm.value = false;
    await search(page.value.pageNo);
  } catch (e) {
    message.error(e);
  } finally {
  }
};
onMounted(() => {
  init();
});
</script>
<style scoped></style>
